<!--查看日志-->
<template>
  <el-dialog
    v-toggle-full
    class="base-dialog log-dialog"
    :custom-class="'panna-dialog_big'"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :before-close="handleClose"
    @closed="closedDialog"
  >
    <p slot="title">{{ btn.Look }}</p>

    <el-form ref="formData" :model="formData" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="dataList.ServiceModule" prop="logObjTypeAlias">
            <el-input v-model="formData.logObjTypeAlias" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="dataList.OperationName" prop="operationName">
            <el-input v-model="formData.operationName" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="dataList.LogEventLevel" prop="level">
            <el-input v-model="formData.level" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="dataList.Content" prop="message">
            <json-view
              :data="formData.message"
              :closed="true"
              class="json-view"
            ></json-view>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="base-dialog-footer">
      <el-button @click="handleClose">{{ btn.Off }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "SystemLogDialog",
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false,
    },

    row: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      dialogVisible: false,
      submitLoad: false,
      formData: {},
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleSystem.buttons");
    },
    dataList() {
      return this.$t("ModuleSystem.System");
    },
  },
  watch: {
    value: function() {
      this.dialogVisible = this.value;
      if (this.value) {
        this.init();
      }
    },
  },
  created() {},
  methods: {
    // 初始化
    async init() {
      //  先获取信息
      if (this.row) {
        // 获取信息
        this.formData.logObjTypeAlias = this.row.logObjTypeAlias;
        this.formData.operationName = this.row.operationName;
        this.formData.level = this.row.level;
        this.formData.createTime = this.row.createTime;
        this.formData.operatorName = this.row.operatorName;

        // const reg = /\\/g;

        // const replaceAfter = this.row.message.replace(reg, "");
        // this.formData.message = this.row.message
        //   ? JSON.parse(this.row.message)
        //   : {};
        if (this.row.message && this.row.message != null) {
          this.formData.message = JSON.parse(this.row.message);
        } else {
          this.formData.message = {};
        }
      }
    },

    // 关闭弹框
    handleClose() {
      this.$emit("input", false);
    },
    // 关闭弹框动画结束
    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
    },
  },
};
</script>

<style lang="scss" scoped>
.log-dialog {
  .el-dialog__body {
    padding: 40px 60px;
  }
  .relay-only-value {
    margin-bottom: 2px;
  }
  .json-view {
    position: relative;
    height: 300px;
  }
}
</style>
